<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>主页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="static/plugins/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="static/css/styles.css"/>
		<link rel="stylesheet" type="text/css" href="static/css/index.css"/>
	</head>
	<body>

		<!-- 导航模块 -->
		<div class="fly-header layui-bg-black" id="page-wrapper"  >
			<div class="layui-container">
			<ul class="layui-nav" id="navShow">
				<li class="layui-nav-item layui-this"><a href="javascript:;">主页</a></li>
				<li class="layui-nav-item "><a href="javascript:;">动态</a></li>
				<!--未登录显示-->
				<div id="homeNav" style="float:right">
					<div v-if="!login" style="float: right">
						<li class="layui-nav-item" ><a class="user-nickname" href="login.html">登录</a></li>
						<li class="layui-nav-item" ><a class="user-nickname" href="register.html">注册</a></li>
					</div>
					<!--已登录显示-->
					<div v-else style="float: right;text-align: center" id="isLogin" >
						<li class="layui-nav-item"><a class="user-nickname"  v-on:click="userHome" href="javascript:;"><img src="./static/images/face.jpg" class="layui-nav-img">{{name}}</a></li>
						<li class="layui-nav-item"><a href="javascript:;"  v-on:click="userLogout" id="userLogout">安全退出</a></li>
					</div>
				</div>



			</ul>
			</div>
		</div>
		<!-- 幻灯模块 -->
		<div class="layui-carousel" id="images">
		  <div carousel-item>
		    <div style="background-color: rgba(79,91,255,0.64)"></div>
		    <div style="background-color: #cfcfcf"></div>
		    <div style="background-color: #b3ccff"></div>
		    <div style="background-color: #ffa342"></div>
		    <div style="background-color: #5c8b8e"></div>
		  </div>
		</div>
		<video src="" class="layui-icon-video " ></video>
		  <table></table>

		<script src="static/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.use(['element','form','carousel','jquery'], function(){
				var element = layui.element;
				var carousel = layui.carousel;
				var $ = layui.jquery;
				document.getElementById("isLogin").style.display = "none";
				carousel.render({
				    elem: '#images'
				    ,width: '100%' //设置容器宽度
				    ,arrow: 'hover' //始终显示箭头
				  });
				$.ajax({
					url: 'http://localhost:8080/tourism-user-api/user/info',
					type: 'POST',
					dataType: 'json',
					xhrFields: {
						withCredentials: true
					},
					success: function (resData) {
						if (resData.code == 1) {
							document.getElementById("isLogin").style.display = "block";
							 var isLogin = new Vue ({
								el:'#homeNav',
								data:{
									name:resData.data.nickname,
									login:true

								},
								methods:{
									userLogout: function (event) {
										const index = top.layer.msg('正在退出', {icon: 16, time: false, shade: 0.8});
										setTimeout(function () {
											$.ajax({
												url: 'http://localhost:8080/tourism-user-api/user/logout',
												type: 'POST',
												dataType: 'json',
												/* contentType: 'application/json', */
												xhrFields: {
													withCredentials: true
												},
												success: function (resData) {
													if (resData.code == 1001) {
														window.location.href = "login.html";
													}
												},
												error: function (XMLHttpRequest, textStatus, errorThrown) {
													layer.alert('用户未登录');
												}
											});
										}, 1000);
										return false;
									},
									userHome:function (event) {
										window.location.href = "user.html";
									}

								}
							})
						}
					},
				});
				return false;
			});

		</script>
	</body>
</html>
